<template>
    <div class="flexbox flexcolumn height_100">
        <AddPlanGroup />
        <AddRuleGroup />
        <EditRuleGroup />
        <OccupyPlan />
        <el-form label-position='top' label-width="auto" size="small" :model="addStrategyForm" :hide-required-asterisk='true' ref="addStrategyForm" :rules="addStrategyRules" class="flex over_box add_form" v-loading="loadingData" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="com_box pd_20 mb_12">
                <div class="head_stra flexbox flexcenter">
                    <div class="has_check flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                        <div class="has_ch_left">
                            <span class="has_text">已选中{{hasPlanData.length}}项</span>
                            <span class="has_btn" @click="batchDeletPlan">删除</span>
                        </div>
                        <div class="close_check" @click="closeHasPlanCheck">
                            <img src="../../assets/img/close_check.svg" alt="">
                        </div>
                    </div>
                    <div class="flexbox flex flexcenter flexbetween" v-else>
                        <span class="font_16 color_01">广告组</span>
                        <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addPlanGroup()">添加广告组</el-button>
                    </div>
                </div>
                <el-form-item label="" prop="planData" :rules="{required: true, message: '请添加', trigger: ['blur', 'change']}">
                    <el-table :data="addStrategyForm.planData" ref="planRef" max-height="300" class="com_table" :row-key="(row)=>{ return row.id}" @selection-change="selectGroup">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无广告组，请先添加</div>
                        </div>
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                        </el-table-column>
                        <el-table-column prop="campaign_id" label="广告组 ID" width="250">
                        </el-table-column>
                        <el-table-column prop="name" label="广告组">
                        </el-table-column>
                        <el-table-column prop="stat_cost" label="操作" width="88">
                            <template slot-scope="scope">
                                <el-link type="danger" :underline="false" @click="deletPlan(scope.$index)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </div>

            <div class="com_box pd_20 mb_12">
                <div class="head_stra flexbox flexcenter">
                    <!-- <div class="has_check flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                        <div class="has_ch_left">
                            <span class="has_text">已选中{{hasPlanData.length}}项</span>
                            <span class="has_btn" @click="batchDisablePlan('DISABLE')">删除</span>
                        </div>
                        <div class="close_check" @click="closeHasPlanCheck">
                            <img src="../../assets/img/close_check.svg" alt="">
                        </div>
                    </div> -->
                    <div class="flexbox flex flexcenter flexbetween">
                        <span class="font_16 color_01">规则组</span>
                        <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addRuleGroup">添加规则组</el-button>
                    </div>
                </div>
                <el-form-item label="" prop="rule_group_id" :rules="{required: true, message: '请添加', trigger: ['blur', 'change']}">
                    <el-table :data="addStrategyForm.rule_group_id" ref="ruleRef" class="com_table" max-height="300" :row-key="(row)=>{ return row.id}" @selection-change="selectRule">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无规则组，请先添加</div>
                        </div>
                        <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                    </el-table-column> -->
                        <el-table-column prop="group_name" label="规则组名称">
                        </el-table-column>
                        <el-table-column prop="ad_name" label="绑定规则" width="145">
                            <template slot-scope="scope">
                                <div class="rule_num">{{scope.row.operation.length}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stat_cost" label="操作" width="110">
                            <template slot-scope="scope">
                                <el-link type="primary" :underline="false" @click="editRuleGroup(scope.row,scope.$index)">编辑</el-link>
                                <el-link type="danger" :underline="false" @click="deletRule(scope.$index)" style="margin-left:10px">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </div>

            <div class="com_box pd_20 mb_12">
                <div class="head_stra flexbox flexcenter">
                    <div class="flexbox flex flexcenter flexbetween">
                        <span class="font_16 color_01">规则组应用规则</span>
                    </div>
                </div>
                <el-form-item label="" prop="name">
                    <div class="rule_box">
                        <div class="rule_title flexbox flexcenter">
                            设置条件
                            <img src="../../assets/img/tips_icon.svg" alt="" style="margin:0 5px">
                            <span class="font_13 color_03">大于等于左边界，小于等于右边界</span>
                        </div>
                        <div class="cod_item flexbox flexcenter" v-for="(item,index) in addStrategyForm.condition" :key="index">
                            <span class="cod_tag">条件{{index+1}}</span>
                            <span class="cod_text font_14 color_01 ml_12">广告主roi</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_left`" :rules="addStrategyRules.group" class="ml_12">
                                <el-input v-model="item.roi_left" placeholder="请输入" @change="setSessionStorage" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_right`" :rules="addStrategyRules.group" class="ml_12">
                                <el-input v-model="item.roi_right" placeholder="请输入" @change="setSessionStorage" style="width:120px"></el-input>
                            </el-form-item>
                            <div class="icon_btn ml_12" v-if="addStrategyForm.condition.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addCondition">添加条件</el-link>
                        <div class="divider_line"></div>
                        <div class="rule_title">触发操作</div>
                        <div class="oper_item flexbox flexcenter" v-for="(item,index) in addStrategyForm.operation" :key="index">
                            <span class="cod_text font_14 color_01 mt_12">满足</span>
                            <el-form-item label="" :prop="`operation.${index}.condition`" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}" class="ml_12 mt_12">
                                <el-select v-model="item.condition" @change="setSessionStorage" placeholder="请选择" style="width:120px">
                                    <el-option :label="'条件'+(index2+1)" :value="index2" v-for="(item2,index2) in addStrategyForm.condition" :key="index2"></el-option>
                                </el-select>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12 mt_12">10分钟消耗</span>
                            <el-form-item label="" :prop="`operation.${index}.group_left`" class="ml_12 mt_12">
                                <el-select v-model="item.group_left" @change="setSessionStorage" placeholder="请选择" style="width:120px">
                                    <el-option label="无" value=""></el-option>
                                    <el-option :label="item.group_name" :value="index" v-for="(item,index) in addStrategyForm.rule_group_id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="addStrategyRules.group" class="ml_12 mt_12">
                                <el-input v-model="item.speed_left" placeholder="请输入" @change="setSessionStorage" style="width:120px"></el-input>
                            </el-form-item>
                            <el-form-item label="" :prop="`operation.${index}.group_middle`" class="ml_12 mt_12">
                                <el-select v-model="item.group_middle" @change="setSessionStorage" placeholder="请选择" style="width:120px">
                                    <el-option label="无" value=""></el-option>
                                    <el-option :label="item.group_name" :value="index" v-for="(item,index) in addStrategyForm.rule_group_id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="addStrategyRules.group" class="ml_12 mt_12">
                                <el-input v-model="item.speed_right" @change="setSessionStorage" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <el-form-item label="" :prop="`operation.${index}.group_right`" class="ml_12 mt_12">
                                <el-select v-model="item.group_right" @change="setSessionStorage" placeholder="请选择" style="width:120px">
                                    <el-option label="无" value=""></el-option>
                                    <el-option :label="item.group_name" :value="index" v-for="(item,index) in addStrategyForm.rule_group_id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="icon_btn ml_12 mt_12" v-if="addStrategyForm.operation.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletOperation(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addOperation">添加操作</el-link>
                    </div>
                </el-form-item>
            </div>

            <div class="com_box pd_20 mb_12">
                <div class="head_stra flexbox flexcenter">
                    <div class="flexbox flex flexcenter flexbetween">
                        <span class="font_16 color_01">基础信息</span>
                    </div>
                </div>
                <div class="flexbox flexcenter">
                    <div class="rule_title">策略名称</div>
                    <el-form-item label="" prop="name" :rules="{required: true, message: '请输入策略名称', trigger: ['blur', 'change']}" style="margin-bottom:0;margin-left:20px">
                        <el-input v-model="addStrategyForm.name" @change="setSessionStorage" placeholder="请输入" style="width:400px"></el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <div class="footer_stra com_box pd_20">
            <el-button type="primary" class="el-button-width" size="small" :loading="loading" :disabled="loading" @click="submitForm('addStrategyForm')">保存</el-button>
            <el-button plain class="el-button-width" size="small" @click="goBack">退出</el-button>
        </div>
    </div>
</template>

<script>
import AddPlanGroup from "./AddPlanGroup";
import AddRuleGroup from "./AddRuleGroup";
import EditRuleGroup from "./EditRuleGroup";
import OccupyPlan from "./OccupyPlan";
export default {
    name: "",
    data() {
        return {
            loading: false,
            loadingData: false,
            hasPlanData: [],
            hasRuleData: [],
            addStrategyForm: {
                planData: [],
                rule_group_id: [],
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        speed_left: "",
                        speed_right: "",
                        group_left: "",
                        group_middle: "",
                        group_right: "",
                    },
                ],
                name: "",
            },
            submitDataForm: {
                campaign_group_id: [],
                rule_group_id: [],
                use_rule: {
                    condition: [
                        {
                            roi_left: "",
                            roi_right: "",
                        },
                    ],
                    operation: [
                        {
                            condition: "",
                            speed_left: "",
                            speed_right: "",
                            group_left: "",
                            group_middle: "",
                            group_right: "",
                        },
                    ],
                },
                name: "",
                template_id: "",
            },
            addStrategyRules: {
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.submitDataForm.template_id = this.$route.query.template_id;
        this.getDataList();
    },
    methods: {
        //获取策略详情
        async getDataList() {
            this.loadingData = true;
            const { data: res } = await this.$http.post(
                "autodrop/configure/templateFind",
                {
                    template_id: this.submitDataForm.template_id,
                }
            );
            if (res.code !== 200) {
                this.loadingData = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loadingData = false;
                this.addStrategyForm.planData = res.data.campaign_group_id;
                this.addStrategyForm.rule_group_id = res.data.rule_group_id;
                this.addStrategyForm.name = res.data.name;
                this.addStrategyForm.condition = res.data.use_rule.condition;
                this.addStrategyForm.operation = res.data.use_rule.operation;
            }
        },

        // 添加广告组
        addPlanGroup(type) {
            const attr = {
                dialogVsb: true,
                planData: this.addStrategyForm.planData,
                type: type,
            };
            this.$bus.emit("addPlanGroup", attr);
        },

        // 删除广告组
        deletPlan(index) {
            this.addStrategyForm.planData.splice(index, 1);
        },

        // 批量删除广告组
        batchDeletPlan() {
            for (let i in this.addStrategyForm.planData) {
                for (let a in this.hasPlanData) {
                    if (
                        this.addStrategyForm.planData[i].id ==
                        this.hasPlanData[a].id
                    ) {
                        this.addStrategyForm.planData.splice(i, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 选择广告组
        selectGroup(v) {
            this.hasPlanData = v;
        },

        // 关闭已选广告组
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 添加规则组
        addRuleGroup() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addRuleGroup", attr);
        },

        // 删除规则组
        deletRule(index) {
            for (let i in this.addStrategyForm.operation) {
                if (this.addStrategyForm.operation[i].group_left == index) {
                    this.addStrategyForm.operation[i].group_left = "";
                }
                if (this.addStrategyForm.operation[i].group_middle == index) {
                    this.addStrategyForm.operation[i].group_middle = "";
                }
                if (this.addStrategyForm.operation[i].group_right == index) {
                    this.addStrategyForm.operation[i].group_right = "";
                }
            }
            this.addStrategyForm.rule_group_id.splice(index, 1);
        },

        // 编辑规则组
        editRuleGroup(row, index) {
            const attr = {
                dialogVsb: true,
                row: row,
                index: index,
            };
            this.$bus.emit("editRuleGroup", attr);
        },

        // 添加条件
        addCondition() {
            this.addStrategyForm.condition.push({
                roi_left: "",
                roi_right: "",
            });
        },

        // 删除条件
        deletCondition(index) {
            for (let i in this.addStrategyForm.operation) {
                if (this.addStrategyForm.operation[i].condition == index) {
                    this.addStrategyForm.operation[i].condition = "";
                } else if (
                    this.addStrategyForm.operation[i].condition >=
                    this.addStrategyForm.condition.length - 1
                ) {
                    this.addStrategyForm.operation[i].condition = "";
                }
            }
            this.addStrategyForm.condition.splice(index, 1);
        },

        // 添加操作
        addOperation() {
            this.addStrategyForm.operation.push({
                condition: 0,
                speed_left: "",
                speed_right: "",
                group_left: "",
                group_middle: "",
                group_right: "",
            });
        },

        // 删除操作
        deletOperation(index) {
            this.addStrategyForm.operation.splice(index, 1);
        },

        goBack() {
            this.$router.go(-1);
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.submitDataForm.campaign_group_id =
                        this.addStrategyForm.planData.map((item) => {
                            return item.campaign_id;
                        });
                    this.submitDataForm.rule_group_id =
                        this.addStrategyForm.rule_group_id;
                    this.submitDataForm.use_rule.condition =
                        this.addStrategyForm.condition;
                    this.submitDataForm.use_rule.operation =
                        this.addStrategyForm.operation;
                    this.submitDataForm.name = this.addStrategyForm.name;
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "autodrop/configure/templateEdit",
                        this.submitDataForm
                    );
                    if (res.code == 202) {
                        this.$message.error(res.msg);
                        const attr = {
                            dialogVsb: true,
                            data: res.data,
                        };
                        this.$bus.emit("occupyPlan", attr);
                        this.loading = false;
                        return;
                    } else if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$router.go(-1);
                        this.$message({
                            message: "编辑成功",
                            type: "success",
                        });
                        this.loading = false;
                    }
                } else {
                    return false;
                }
            });
        },
    },
    components: {
        AddPlanGroup,
        AddRuleGroup,
        EditRuleGroup,
        OccupyPlan,
    },
};
</script>


<style scoped>
</style>


